컨ν μ€νΈ λ‘λ©μΌλ‘ νλ‘ νΈμλ μ±λ₯μ μ΅μ ννμΈμ. μ¬μ©μ 컨ν μ€νΈμ λ°λΌ 리μμ€λ₯Ό μ λ¬νμ¬ μ μΈκ³μ μΌλ‘ μλμ μ¬μ©μ κ²½νμ κ°μ νλ λ°©λ²μ μμ보μΈμ.
νλ‘ νΈμλ 컨ν μ€νΈ λ‘λ©: μ½ν μΈ μΈμ 리μμ€ κ΄λ¦¬
μ€λλ μ±λ₯ μ€μ¬μ μΉ νκ²½μμ λΉ λ₯΄κ³ λ°μμ±μ΄ λ°μ΄λ μ¬μ©μ κ²½νμ μ 곡νλ κ²μ λ§€μ° μ€μν©λλ€. μ΄λ₯Ό λ¬μ±νκΈ° μν ν΅μ¬μ μΈ μΈ‘λ©΄ μ€ νλλ ν¨μ¨μ μΈ λ¦¬μμ€ κ΄λ¦¬μ λλ€. μ ν΅μ μΈ λ‘λ© μ λ΅μ μ’ μ’ νμνμ§ μ¬λΆμ μκ΄μμ΄ λͺ¨λ μμ°μ 미리 μ λ¬νλ λ°©μμ ν¬ν¨ν©λλ€. μ΄λ μ΄κΈ° νμ΄μ§ λ‘λ λ³λͺ© νμμ μ λ°νμ¬ μ¬μ©μ μ°Έμ¬λμ μ λ°μ μΈ μ±λ₯μ μν₯μ μ€ μ μμ΅λλ€. λ³΄λ€ μ§λ₯μ μΈ μ κ·Ό λ°©μμΈ μ»¨ν μ€νΈ λ‘λ©μ μ¬μ©μμ 컨ν μ€νΈμ μ¦κ°μ μΈ μꡬμ λ°λΌ 리μμ€ μ λ¬μ λ§μΆ€μΌλ‘μ¨ μ΄ λ¬Έμ λ₯Ό ν΄κ²°ν©λλ€.
컨ν μ€νΈ λ‘λ©μ΄λ 무μμΈκ°?
μ½ν μΈ μΈμ λ‘λ© λλ μ μν λ‘λ©μ΄λΌκ³ λ μλ €μ§ μ»¨ν μ€νΈ λ‘λ©μ νΉμ 쑰건μ΄λ 컨ν μ€νΈμ λ°λΌ 리μμ€(μ: JavaScript, CSS, μ΄λ―Έμ§, ν°νΈ)λ₯Ό λμ μΌλ‘ λ‘λ©νλ νλ‘ νΈμλ μ΅μ ν κΈ°μ μ λλ€. λͺ¨λ κ²μ ν λ²μ λ‘λ©νλ λμ , μ ν리μΌμ΄μ μ νΉμ μκ°μ μ΄λ€ 리μμ€κ° νμνμ§ μ§λ₯μ μΌλ‘ νλ¨νμ¬ ν΄λΉ 리μμ€λ§ λ‘λ©ν©λλ€. μ΄λ μ΄κΈ° νμ΄λ‘λλ₯Ό μ΅μννμ¬ λ λΉ λ₯Έ νμ΄μ§ λ‘λ μκ°κ³Ό ν₯μλ μ²΄κ° μ±λ₯μΌλ‘ μ΄μ΄μ§λλ€.
κΈλ‘λ² μ μμκ±°λ μΉμ¬μ΄νΈλ₯Ό μκ°ν΄λ³΄μΈμ. μ λ½μ μ¬μ©μλ μμμμ μ¬μ©μμ λ€λ₯Έ ν΅ν κΈ°νΈ, λ μ§ νμ, μΈμ΄ μμ°μ΄ νμν μ μμ΅λλ€. 컨ν μ€νΈ λ‘λ©μ μ¬μ©νλ©΄ κ° μ¬μ©μμκ² κ΄λ ¨λ μμ°λ§ μ λ¬νμ¬ λ€μ΄λ‘λνκ³ μ²λ¦¬ν΄μΌ νλ λ°μ΄ν°μ μμ μ€μΌ μ μμ΅λλ€.
컨ν μ€νΈ λ‘λ©μ μ΄μ
- νμ΄μ§ λ‘λ μλ ν₯μ: μ΄κΈ°μ νμμ μΈ λ¦¬μμ€λ§ λ‘λ©ν¨μΌλ‘μ¨ μ΄κΈ° νμ΄μ§ λ‘λ μκ°μ΄ ν¬κ² λ¨μΆλ©λλ€. μ΄λ νΉν μΈν°λ· μ°κ²°μ΄ λλ¦° μ¬μ©μμκ² λ λμ μ¬μ©μ κ²½νμ μ 곡ν©λλ€.
- λμν μλΉ κ°μ: νμν 리μμ€λ§ μ λ¬νμ¬ μ¬μ©μμ μλ² λͺ¨λμ λμν μλΉλ₯Ό μ€μ¬ λΉμ©μ μ κ°νκ³ λ ν¨μ¨μ μΈ λ€νΈμν¬λ₯Ό λ§λλλ€.
- μ¬μ©μ κ²½ν ν₯μ: λ λΉ λ₯Έ νμ΄μ§ λ‘λ μκ°κ³Ό λ λ°μμ μΈ μΈν°νμ΄μ€λ λ λΆλλ½κ³ λ§€λ ₯μ μΈ μ¬μ©μ κ²½νμ μ 곡νμ¬ μ¬μ©μ λ§μ‘±λμ μ μ§μ¨μ λμ λλ€.
- λ λμ SEO μ±λ₯: κ²μ μμ§μ λ‘λ© μκ°μ΄ λΉ λ₯Έ μΉμ¬μ΄νΈλ₯Ό μ νΈν©λλ€. 컨ν μ€νΈ λ‘λ©μ μ±λ₯μ μ΅μ ννμ¬ μΉμ¬μ΄νΈμ SEO μμλ₯Ό ν₯μμν¬ μ μμ΅λλ€.
- μ΅μ νλ 리μμ€ νμ©: 리μμ€λ νμν λλ§ λ‘λλλ―λ‘ λΆνμν 리μμ€ μλΉλ₯Ό λ°©μ§νκ³ μ λ°μ μΈ μμ€ν ν¨μ¨μ±μ ν₯μμν΅λλ€.
컨ν μ€νΈ λ‘λ©μ μ ν
컨ν μ€νΈ λ‘λ©μ νΉμ μλ리μ€μ 리μμ€ μ νμ λ§μΆ°μ§ λ€μν κΈ°μ μ μ¬μ©νμ¬ κ΅¬νν μ μμ΅λλ€. λ€μμ λͺ κ°μ§ μΌλ°μ μΈ μ κ·Ό λ°©μμ λλ€.
1. μ§μ° λ‘λ© (Lazy Loading)
μ§μ° λ‘λ©μ 리μμ€(μ£Όλ‘ μ΄λ―Έμ§μ λΉλμ€)κ° λ·°ν¬νΈμ λ€μ΄μ€λ €κ³ ν λλ§ λ‘λνλ κΈ°μ μ λλ€. μ΄λ λΈλΌμ°μ κ° μ¬μ©μμκ² μ¦μ 보μ΄μ§ μλ 리μμ€λ₯Ό λ€μ΄λ‘λνλ κ²μ λ°©μ§ν©λλ€.
μμ: μλ§μ μ΄λ―Έμ§κ° μλ λ΄μ€ μΉμ¬μ΄νΈλ μ§μ° λ‘λ©μ μ¬μ©νμ¬ μ¬μ©μκ° νμ΄μ§λ₯Ό μλλ‘ μ€ν¬λ‘€ν λλ§ μ΄λ―Έμ§λ₯Ό λ‘λν¨μΌλ‘μ¨ μ΄κΈ° νμ΄μ§ λ‘λ μκ°μ ν¬κ² μ€μΌ μ μμ΅λλ€. `Intersection Observer` APIμ κ°μ λΌμ΄λΈλ¬λ¦¬λ λ€μν μ§μ° λ‘λ© μ»΄ν¬λνΈλ₯Ό κ°μ§ React λλ Angularμ λ€μ΄ν°λΈ μ§μ° λ‘λ© κΈ°λ₯κ³Ό κ°μ νλ μμν¬λ μ§μ° λ‘λ© κ΅¬νμ λ¨μνν©λλ€.
μ½λ μμ (Intersection Observerλ₯Ό μ¬μ©ν JavaScript):
const images = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.removeAttribute('data-src');
observer.unobserve(img);
}
});
});
images.forEach(img => {
observer.observe(img);
});
2. μ½λ μ€ν리ν (Code Splitting)
μ½λ μ€ν리ν μ ν° JavaScript λ²λ€μ μ£Όλ¬ΈνμΌλ‘ λ‘λν μ μλ λ μμ μ²ν¬λ‘ λλλ κΈ°μ μ λλ€. μ΄λ₯Ό ν΅ν΄ νΉμ νμ΄μ§λ κΈ°λ₯μ νμν μ½λλ§ λ‘λνμ¬ μ΄κΈ° λ€μ΄λ‘λ ν¬κΈ°λ₯Ό μ€μ΄κ³ μ±λ₯μ ν₯μμν¬ μ μμ΅λλ€.
μμ: μ¬λ¬ λͺ¨λμ΄ μλ 볡μ‘ν μΉ μ ν리μΌμ΄μ μ μ½λ μ€ν리ν μ μ¬μ©νμ¬ κ° λͺ¨λμ΄ νμν λλ§ λ‘λν μ μμ΅λλ€. Webpack, Parcel, Rollupκ³Ό κ°μ λꡬλ JavaScript νλ‘μ νΈμμ μ½λ μ€ν리ν μ μ½κ² ꡬνν μ μλλ‘ ν΄μ€λλ€.
μ½λ μ€ν리ν μ μμ μλ리μ€
- λΌμ°νΈ κΈ°λ° μ€ν리ν : λ¨μΌ νμ΄μ§ μ ν리μΌμ΄μ (SPA) λ΄μ λ€λ₯Έ λΌμ°νΈμ λν΄ λ€λ₯Έ λ²λ€μ λ‘λ©ν©λλ€.
- μ»΄ν¬λνΈ κΈ°λ° μ€ν리ν : νΉμ μ»΄ν¬λνΈκ° λ λλ§λ λλ§ ν΄λΉ μ»΄ν¬λνΈμ κ΄λ ¨λ μ½λλ₯Ό λ‘λ©ν©λλ€.
- κΈ°λ₯ κΈ°λ° μ€ν리ν : μ νμ μ΄κ±°λ μμ£Ό μ¬μ©λμ§ μλ κΈ°λ₯μ μ½λλ₯Ό μ£Όλ¬ΈνμΌλ‘ λ‘λ©ν©λλ€.
3. μ‘°κ±΄λΆ λ‘λ© (Conditional Loading)
μ‘°κ±΄λΆ λ‘λ©μ μ¬μ©μμ κΈ°κΈ° μ ν, λΈλΌμ°μ λ²μ , μμΉ λλ μΈμ¦ μνμ κ°μ νΉμ 쑰건μ λ°λΌ 리μμ€λ₯Ό λ‘λνλ κ²μ ν¬ν¨ν©λλ€.
μμ: μΉμ¬μ΄νΈλ μ‘°κ±΄λΆ λ‘λ©μ μ¬μ©νμ¬ λ°μ€ν¬ν± λ° λͺ¨λ°μΌ κΈ°κΈ°μ λν΄ λ€λ₯Έ CSS μ€νμΌμνΈλ₯Ό μ 곡νκ±°λ, μ¬μ©μμ μμΉμ λ°λΌ λ€λ₯Έ μΈμ΄ μμ°μ λ‘λν μ μμ΅λλ€.
κΈ°κΈ° κ°μ§: νλ©΄ ν¬κΈ°λ κΈ°κΈ° κΈ°λ₯μ λ°λΌ λ€λ₯Έ μ€νμΌμνΈλ₯Ό μ 곡ν©λλ€. *A/B ν μ€ν : λ€λ₯Έ μ¬μ©μ κ·Έλ£Ήμ λν΄ μ»΄ν¬λνΈλ κΈ°λ₯μ λ€λ₯Έ λ²μ μ λ‘λ©ν©λλ€. *κΈ°λ₯ νλκ·Έ: μλ² μΈ‘ ꡬμ±μ λ°λΌ κΈ°λ₯μ λμ μΌλ‘ νμ±ν λλ λΉνμ±νν©λλ€.
4. λΌμ°νΈ κΈ°λ° λ‘λ© (Route-Based Loading)
λΌμ°νΈ κΈ°λ° λ‘λ©μ νΉν λ¨μΌ νμ΄μ§ μ ν리μΌμ΄μ (SPA)μ μ μ©ν©λλ€. νμ¬ λ°©λ¬Έ μ€μΈ λΌμ°νΈλ νμ΄μ§μ λ°λΌ 리μμ€λ₯Ό λ‘λνλ κ²μ ν¬ν¨ν©λλ€. μ΄λ νΉμ λΌμ°νΈμ νμν 리μμ€λ§ λ‘λλλλ‘ λ³΄μ₯νμ¬ μ΄κΈ° λ‘λ μκ°μ μ€μ΄κ³ λ€λΉκ²μ΄μ μ±λ₯μ ν₯μμν΅λλ€.
μμ: SPAμμ ν νμ΄μ§, μ ν μΉ΄νλ‘κ·Έ νμ΄μ§, κ²°μ νμ΄μ§μ λν΄ κ°κ° λ€λ₯Έ JavaScript λ° CSS λ²λ€μ λ‘λν μ μμ΅λλ€.
React Router v6λ‘ κ΅¬ννκΈ°
- `React.lazy`μ `Suspense` μ¬μ©: μ΄ μ»΄ν¬λνΈλ€μ ν¨κ» μ¬μ©νμ¬ νμ¬ λΌμ°νΈμ λ°λΌ μ»΄ν¬λνΈλ₯Ό μ§μ° λ‘λ©ν μ μμ΅λλ€.
- λμ μν¬νΈ(Dynamic Imports): λΌμ°νΈλ₯Ό λ°©λ¬Έν λλ§ μ»΄ν¬λνΈλ₯Ό λμ μΌλ‘ μν¬νΈν©λλ€.
5. λ‘μΌμΌ κΈ°λ° λ‘λ© (Locale-Based Loading)
κΈλ‘λ² μ¬μ©μλ₯Ό λμμΌλ‘ νλ μΉμ¬μ΄νΈμ κ²½μ°, λ‘μΌμΌ κΈ°λ° λ‘λ©μ μ¬μ©μμ μΈμ΄ λλ μ§μμ λ°λΌ 리μμ€λ₯Ό λ‘λνλ κ²μ ν¬ν¨ν©λλ€. μ΄λ₯Ό ν΅ν΄ μ¬μ©μλ μ νΈνλ μΈμ΄λ‘ μ½ν μΈ λ₯Ό λ³΄κ³ μΉμ¬μ΄νΈκ° νμ§ κ΄μ΅μ μ μνλλ‘ ν μ μμ΅λλ€.
μμ: μΉμ¬μ΄νΈλ λ‘μΌμΌ κΈ°λ° λ‘λ©μ μ¬μ©νμ¬ μ¬μ©μμ μμΉμ λ°λΌ λ€λ₯Έ λ²μ νμΌ, ν΅ν κΈ°νΈ, λ μ§ νμμ μ 곡ν μ μμ΅λλ€.
ꡬν κΈ°μ
- `Accept-Language` ν€λ μ¬μ©: `Accept-Language` HTTP ν€λλ₯Ό μ¬μ©νμ¬ μ¬μ©μμ μ νΈ μΈμ΄λ₯Ό μλ² μΈ‘μμ κ°μ§ν©λλ€.
- ν΄λΌμ΄μΈνΈ μΈ‘ μΈμ΄ κ°μ§: JavaScriptλ₯Ό μ¬μ©νμ¬ μ¬μ©μμ λΈλΌμ°μ μΈμ΄ μ€μ μ κ°μ§ν©λλ€.
- μ§μνλ λ²λ€ μ 곡: κ°μ§λ λ‘μΌμΌμ λ°λΌ λ²μλ μ½ν μΈ λ₯Ό ν¬ν¨νλ λ€λ₯Έ λ²λ€μ λμ μΌλ‘ μ 곡ν©λλ€.
컨ν μ€νΈ λ‘λ© κ΅¬ν: λ¨κ³λ³ κ°μ΄λ
컨ν μ€νΈ λ‘λ©μ ꡬννλ €λ©΄ μ μ€ν κ³νκ³Ό μ€νμ΄ νμν©λλ€. μμνλ λ° λμμ΄ λλ λ¨κ³λ³ κ°μ΄λλ λ€μκ³Ό κ°μ΅λλ€.
1. μΉμ¬μ΄νΈμ 리μμ€ μ¬μ©λ λΆμ
첫 λ²μ§Έ λ¨κ³λ μΉμ¬μ΄νΈμ 리μμ€ μ¬μ©λμ λΆμνμ¬ μ»¨ν μ€νΈ λ‘λ©μ μ μ©ν μ μλ μμμ μλ³νλ κ²μ λλ€. λΈλΌμ°μ κ°λ°μ λꡬ(μ: Chrome DevTools, Firefox Developer Tools)λ₯Ό μ¬μ©νμ¬ κ° νμ΄μ§μμ λ‘λλλ 리μμ€μ μ±λ₯μ λ―ΈμΉλ μν₯μ νμΈνμΈμ.
2. 컨ν μ€νΈ κΈ°ν μλ³
λΆμμ λ°νμΌλ‘ 컨ν μ€νΈ λ‘λ©μ κΈ°νλ₯Ό μλ³νμΈμ. λ€μ μ§λ¬Έμ κ³ λ €νμΈμ.
- μ΄κΈ° νμ΄μ§ λ‘λ μ μ¦μ νμνμ§ μμ 리μμ€λ 무μμΈκ°?
- νΉμ μ¬μ©μ μνΈ μμ©μ΄λ κΈ°λ₯μλ§ νμν 리μμ€λ 무μμΈκ°?
- μ¬μ©μ κΈ°κΈ°, μμΉ λλ κΈ°ν 쑰건μ λ°λΌ λ‘λν μ μλ 리μμ€λ 무μμΈκ°?
3. μ¬λ°λ₯Έ κΈ°μ μ ν
μλ³λ κΈ°νμ κ΄λ ¨λ νΉμ 리μμ€μ λ°λΌ μ μ ν 컨ν μ€νΈ λ‘λ© κΈ°μ μ μ ννμΈμ. μ΄λ―Έμ§μ λΉλμ€μλ μ§μ° λ‘λ©μ, JavaScript λ²λ€μλ μ½λ μ€ν리ν μ, CSS μ€νμΌμνΈμ μΈμ΄ μμ°μλ μ‘°κ±΄λΆ λ‘λ©μ μ¬μ©νλ κ²μ κ³ λ €νμΈμ.
4. μ νν κΈ°μ ꡬν
μ μ ν λꡬμ λΌμ΄λΈλ¬λ¦¬λ₯Ό μ¬μ©νμ¬ μ νν κΈ°μ μ ꡬννμΈμ. μλ₯Ό λ€μ΄, μ§μ° λ‘λ©μλ `Intersection Observer` APIλ₯Ό, μ½λ μ€ν리ν μλ Webpackμ, μ‘°κ±΄λΆ λ‘λ©μλ μλ² μΈ‘ μ€ν¬λ¦½ν μ μ¬μ©ν μ μμ΅λλ€.
5. ν μ€νΈ λ° μ΅μ ν
컨ν μ€νΈ λ‘λ©μ ꡬνν νμλ μΉμ¬μ΄νΈλ₯Ό μ² μ ν ν μ€νΈνμ¬ μμλλ‘ μλνκ³ μ±λ₯μ΄ ν₯μλμλμ§ νμΈνμΈμ. λΈλΌμ°μ κ°λ°μ λꡬλ₯Ό μ¬μ©νμ¬ νμ΄μ§ λ‘λ μκ°μ μΈ‘μ νκ³ λ¨μμλ λ³λͺ© νμμ μλ³νμΈμ. μ΅μμ κ²°κ³Όλ₯Ό μ»κΈ° μν΄ κ΅¬νμ μ§μμ μΌλ‘ μ΅μ ννμΈμ.
컨ν μ€νΈ λ‘λ©μ μ€μ μ μ© μ¬λ‘
1. μ μμκ±°λ μΉμ¬μ΄νΈ
μ μμκ±°λ μΉμ¬μ΄νΈλ 컨ν μ€νΈ λ‘λ©μ μ¬μ©νμ¬ λ€μμ μνν μ μμ΅λλ€.
- μ¬μ©μκ° νμ΄μ§λ₯Ό μλλ‘ μ€ν¬λ‘€ν λ μ ν μ΄λ―Έμ§λ₯Ό μ§μ° λ‘λ©ν©λλ€.
- μ¬μ©μκ° μ νμ ν΄λ¦ν λλ§ μ ν μΈλΆ μ 보λ₯Ό λ‘λν©λλ€.
- μ¬μ©μκ° κ²°μ λ₯Ό μ§νν λλ§ κ²°μ κ²μ΄νΈμ¨μ΄ μ€ν¬λ¦½νΈλ₯Ό λ‘λν©λλ€.
- μ¬μ©μμ μμΉμ λ°λΌ λ€λ₯Έ ν΅ν κΈ°νΈμ μΈμ΄ μμ°μ λ‘λν©λλ€.
2. λ΄μ€ μΉμ¬μ΄νΈ
λ΄μ€ μΉμ¬μ΄νΈλ 컨ν μ€νΈ λ‘λ©μ μ¬μ©νμ¬ λ€μμ μνν μ μμ΅λλ€.
- μ¬μ©μκ° νμ΄μ§λ₯Ό μλλ‘ μ€ν¬λ‘€ν λ κΈ°μ¬ μ΄λ―Έμ§λ₯Ό μ§μ° λ‘λ©ν©λλ€.
- μ¬μ©μκ° κΈ°μ¬λ₯Ό ν΄λ¦ν λλ§ λκΈκ³Ό κ΄λ ¨ κΈ°μ¬λ₯Ό λ‘λν©λλ€.
- μ¬μ©μμ κΈ°κΈ° μ ν(λ°μ€ν¬ν± λλ λͺ¨λ°μΌ)μ λ°λΌ λ€λ₯Έ μ€νμΌμνΈλ₯Ό λ‘λν©λλ€.
3. μμ λ―Έλμ΄ νλ«νΌ
μμ λ―Έλμ΄ νλ«νΌμ 컨ν μ€νΈ λ‘λ©μ μ¬μ©νμ¬ λ€μμ μνν μ μμ΅λλ€.
- μ¬μ©μκ° νΌλλ₯Ό μλλ‘ μ€ν¬λ‘€ν λ μ¬μ©μ νλ‘ν μ΄λ―Έμ§μ κ²μλ¬Όμ μ§μ° λ‘λ©ν©λλ€.
- μ¬μ©μκ° μ±ν μ°½μ μ΄ λλ§ μ±ν λ©μμ§λ₯Ό λ‘λν©λλ€.
- μ¬μ©μκ° μ νΈνλ μΈμ΄μ λ°λΌ λ€λ₯Έ μΈμ΄ μμ°μ λ‘λν©λλ€.
컨ν μ€νΈ λ‘λ©μ μν λꡬ λ° λΌμ΄λΈλ¬λ¦¬
μ¬λ¬ λꡬμ λΌμ΄λΈλ¬λ¦¬κ° νλ‘ νΈμλ νλ‘μ νΈμμ 컨ν μ€νΈ λ‘λ©μ ꡬννλ λ° λμμ΄ λ μ μμ΅λλ€.
- Intersection Observer API: μμκ° λ·°ν¬νΈμ λ€μ΄μ€κ±°λ λκ°λ μμ μ κ°μ§νλ λΈλΌμ°μ APIλ‘, μ§μ° λ‘λ©μ μ μ©ν©λλ€.
- Webpack: μ½λ μ€ν리ν λ° κΈ°ν μ΅μ ν κΈ°μ μ μ§μνλ μΈκΈ° μλ JavaScript λ²λ€λ¬μ λλ€.
- Parcel: μ½λ μ€ν리ν μ μ§μνλ μ λ‘ κ΅¬μ± λ²λ€λ¬μ λλ€.
- Rollup: λΌμ΄λΈλ¬λ¦¬ κ°λ°μ μμ£Ό μ¬μ©λλ λ λ€λ₯Έ JavaScript λ²λ€λ¬μ λλ€.
- React.lazy and Suspense: μ»΄ν¬λνΈλ₯Ό μ§μ° λ‘λ©νκ³ λ‘λ© μνλ₯Ό μ²λ¦¬νκΈ° μν React μ»΄ν¬λνΈμ λλ€.
- Angular Lazy Loading: λͺ¨λμ μ§μ° λ‘λ©μ μν Angularμ λ΄μ₯ μ§μ κΈ°λ₯μ λλ€.
- lozad.js: κ²½λ μ§μ° λ‘λ© λΌμ΄λΈλ¬λ¦¬μ λλ€.
κ³Όμ λ° κ³ λ €μ¬ν
컨ν μ€νΈ λ‘λ©μ μλΉν μ΄μ μ μ 곡νμ§λ§ λͺ κ°μ§ κ³Όμ μ κ³ λ €μ¬νλ μμ΅λλ€.
- 볡μ‘μ±: 컨ν μ€νΈ λ‘λ©μ ꡬννλ©΄ νλ‘ νΈμλ μ½λλ² μ΄μ€μ 볡μ‘μ±μ΄ μΆκ°λ μ μμ΅λλ€.
- ν μ€ν : 컨ν μ€νΈ λ‘λ©μ΄ μ¬λ°λ₯΄κ² μλνκ³ λλ½λ 리μμ€κ° μλμ§ νμΈνκΈ° μν΄ μ² μ ν ν μ€νΈκ° νμμ μ λλ€.
- SEO: μ½ν μΈ κ° λμ μΌλ‘ λ‘λλλλΌλ κ²μ μμ§ ν¬λ‘€λ¬κ° λͺ¨λ μ½ν μΈ μ μ κ·Όν μ μλλ‘ ν΄μΌ ν©λλ€.
- μ¬μ©μ κ²½ν: 리μμ€κ° λ‘λλ λ μ¬μ©μ μΈν°νμ΄μ€μ κ°μμ€λ¬μ΄ λ³νλ₯Ό νΌνμΈμ. λ‘λ© νμκΈ°λ νλ μ΄μ€νλλ₯Ό μ¬μ©νμ¬ λΆλλ¬μ΄ μ¬μ©μ κ²½νμ μ 곡νμΈμ.
컨ν μ€νΈ λ‘λ©μ μν λͺ¨λ² μ¬λ‘
컨ν μ€νΈ λ‘λ©μ μ΄μ μ κ·Ήλννλ €λ©΄ λ€μ λͺ¨λ² μ¬λ‘λ₯Ό λ°λ₯΄μΈμ.
- μλ¨ μ½ν μΈ μ°μ μμ μ§μ : μ΄κΈ° νμ΄μ§ λ‘λ μ μ¬μ©μμκ² λ³΄μ΄λ μ½ν μΈ κ° κ°λ₯ν ν 빨리 λ‘λλλλ‘ νμΈμ.
- λ‘λ© νμκΈ° μ¬μ©: λͺ νν λ‘λ© νμκΈ°λ νλ μ΄μ€νλλ₯Ό μ 곡νμ¬ μ¬μ©μμκ² λ¦¬μμ€κ° λ‘λ μ€μμ μ리μΈμ.
- μ΄λ―Έμ§ μ΅μ ν: μ΄λ―Έμ§λ₯Ό μμΆνκ³ μ΅μ ννμ¬ νμΌ ν¬κΈ°λ₯Ό μ€μ΄κ³ λ‘λ© μλλ₯Ό ν₯μμν€μΈμ.
- 리μμ€ μΊμ±: λΈλΌμ°μ μΊμ±μ νμ©νμ¬ λ¦¬μμ€λ₯Ό λ‘컬μ μ μ₯νκ³ λ°λ³΅μ μΈ λ€μ΄λ‘λ νμμ±μ μ€μ΄μΈμ.
- μ±λ₯ λͺ¨λν°λ§: μΉμ¬μ΄νΈμ μ±λ₯μ μ§μμ μΌλ‘ λͺ¨λν°λ§νμ¬ κ°μ ν μμμ μλ³νμΈμ.
νλ‘ νΈμλ λ‘λ©μ λ―Έλ
컨ν μ€νΈ λ‘λ©μ μ§ννλ λΆμΌμ΄λ©° μλ‘μ΄ κΈ°μ κ³Ό κΈ°λ²μ΄ κ³μν΄μ λ±μ₯νκ³ μμ΅λλ€. νλ‘ νΈμλ λ‘λ©μ λ―Έλ λν₯ μ€ μΌλΆλ λ€μκ³Ό κ°μ΅λλ€.
- μμΈ‘ λ‘λ©: λ¨Έμ λ¬λμ μ¬μ©νμ¬ μ¬μ©μκ° λ€μμ νμλ‘ ν κ°λ₯μ±μ΄ μλ 리μμ€λ₯Ό μμΈ‘νκ³ κ·Έμ λ°λΌ 미리 λ‘λν©λλ€.
- HTTP/3: ν₯μλ μ±λ₯κ³Ό μμ μ±μ μ 곡νλ μλ‘μ΄ HTTP νλ‘ν μ½ λ²μ μΌλ‘, 리μμ€ λ‘λ λ°©μμ μν₯μ λ―ΈμΉ μ μμ΅λλ€.
- μ£μ§ μ»΄ν¨ν : μ£μ§ μλ²μ 리μμ€λ₯Ό μΊμ±νμ¬ μ¬μ©μμκ² λ κ°κΉκ² μ΄λμμΌ λκΈ° μκ°μ λμ± μ€μ λλ€.
κ²°λ‘
νλ‘ νΈμλ 컨ν μ€νΈ λ‘λ©μ μΉμ¬μ΄νΈ μ±λ₯μ μ΅μ ννκ³ μ¬μ©μ κ²½νμ κ°μ νκΈ° μν κ°λ ₯ν κΈ°μ μ λλ€. μ¬μ©μ 컨ν μ€νΈμ λ°λΌ μ§λ₯μ μΌλ‘ 리μμ€λ₯Ό λ‘λν¨μΌλ‘μ¨ νμ΄μ§ λ‘λ μκ°μ ν¬κ² μ€μ΄κ³ λμν μλΉλ₯Ό μ΅μννλ©° μ λ°μ μΈ μμ€ν ν¨μ¨μ±μ ν₯μμν¬ μ μμ΅λλ€. 컨ν μ€νΈ λ‘λ©μ ꡬννλ €λ©΄ μ μ€ν κ³νκ³Ό μ€νμ΄ νμνμ§λ§ κ·Έ μ΄μ μ λ Έλ ₯ν κ°μΉκ° μΆ©λΆν©λλ€. μ΄ κ°μ΄λμ μ€λͺ λ λͺ¨λ² μ¬λ‘λ₯Ό λ°λ₯΄κ³ μΉμ¬μ΄νΈμ μ±λ₯μ μ§μμ μΌλ‘ λͺ¨λν°λ§ν¨μΌλ‘μ¨ μ μΈκ³ μ¬μ©μμκ² λΉ λ₯΄κ³ λ°μμ±μ΄ λ°μ΄λλ©° λ§€λ ₯μ μΈ μ¬μ©μ κ²½νμ μ 곡ν μ μμ΅λλ€.